<template>
  <div id="root">
    <div class="App" style="">
      <div class="Add_root__2_C-z">
        <div class="page-nav-bar am-navbar am-navbar-dark">
          <div class="am-navbar-left" role="button">
            <span class="am-navbar-left-icon" aria-hidden="true"
              ><svg class="am-icon am-icon-left am-icon-md">
                <use xlink:href="#left"></use></svg
            ></span>
          </div>
          <div class="am-navbar-title">发布房源</div>
          <div class="am-navbar-right"></div>
        </div>
        <div class="am-list" data-role="rent-list">
          <div class="am-list-header">房源信息</div>
          <div class="am-list-body">
            <div class="am-list-item am-list-item-middle">
              <div class="am-list-line">
                <div class="am-list-content">小区名称</div>
                <div class="am-list-extra">请输入小区名称</div>
                <div
                  class="am-list-arrow am-list-arrow-horizontal"
                  aria-hidden="true"
                ></div>
              </div>
              <div class="am-list-ripple" style="display: none"></div>
            </div>
            <div class="am-list-item am-input-item am-list-item-middle">
              <div class="am-list-line">
                <div class="am-input-label am-input-label-5">
                  租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金
                </div>
                <div class="am-input-control">
                  <input placeholder="请输入租金/月" type="text" value="" />
                </div>
                <div class="am-input-extra">￥/月</div>
              </div>
            </div>
            <div class="am-list-item am-input-item am-list-item-middle">
              <div class="am-list-line">
                <div class="am-input-label am-input-label-5">建筑面积</div>
                <div class="am-input-control">
                  <input placeholder="请输入建筑面积" type="text" value="" />
                </div>
                <div class="am-input-extra">㎡</div>
              </div>
            </div>
            <div>
              <div class="am-list-item am-list-item-middle">
                <div class="am-list-line">
                  <div class="am-list-content">
                    户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型
                  </div>
                  <div class="am-list-extra">请选择</div>
                  <div
                    class="am-list-arrow am-list-arrow-horizontal"
                    aria-hidden="true"
                  ></div>
                </div>
                <div class="am-list-ripple" style="display: none"></div>
              </div>
            </div>
            <div>
              <div class="am-list-item am-list-item-middle">
                <div class="am-list-line">
                  <div class="am-list-content">所在楼层</div>
                  <div class="am-list-extra">请选择</div>
                  <div
                    class="am-list-arrow am-list-arrow-horizontal"
                    aria-hidden="true"
                  ></div>
                </div>
                <div class="am-list-ripple" style="display: none"></div>
              </div>
            </div>
            <div>
              <div class="am-list-item am-list-item-middle">
                <div class="am-list-line">
                  <div class="am-list-content">
                    朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向
                  </div>
                  <div class="am-list-extra">请选择</div>
                  <div
                    class="am-list-arrow am-list-arrow-horizontal"
                    aria-hidden="true"
                  ></div>
                </div>
                <div class="am-list-ripple" style="display: none"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="am-list Add_title__eWgIh" data-role="rent-list">
          <div class="am-list-header">房屋标题</div>
          <div class="am-list-body">
            <div class="am-list-item am-input-item am-list-item-middle">
              <div class="am-list-line">
                <div class="am-input-control">
                  <input
                    placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="am-list Add_pics__2r1Id" data-role="rent-list">
          <div class="am-list-header">房屋图像</div>
          <div class="am-list-body">
            <div class="am-image-picker Add_imgpicker__2WCKl">
              <div class="am-image-picker-list" role="group">
                <div class="am-flexbox am-flexbox-align-center">
                  <div class="am-flexbox-item">
                    <div
                      class="am-image-picker-item am-image-picker-upload-btn"
                      role="button"
                      aria-label="Choose and add image"
                    >
                      <input type="file" accept="image/*" multiple="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="am-list Add_supporting__3H7fo" data-role="rent-list">
          <div class="am-list-header">房屋配置</div>
            <div>
            <van-grid :column-num="5">
         <van-grid-item icon="photo-o" text="衣柜" />
         <van-grid-item icon="photo-o" text="" />
        <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
      </van-grid>
              </div>
        </div>
        <div class="am-list Add_desc__1Gqte" data-role="rent-list">
          <div class="am-list-header">房屋描述</div>
          <div class="am-list-body">
            <div class="am-list-item am-textarea-item">
              <div class="am-textarea-control">
                <textarea
                  rows="5"
                  placeholder="请输入房屋描述信息"
                  style="height: 125px"
                ></textarea>
              </div>
            </div>
          </div>
        </div>
        <div class="am-flexbox Add_bottom__Pir6G am-flexbox-align-center">
          <div class="am-flexbox-item Add_cancel__1f986">取消</div>
          <div class="am-flexbox-item Add_confirm__34c_r">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'layout-page',
  data () {
    return {}
  }
}
</script>

<style lang="less" scoped></style>
